<template>
  <div class="orderInfo flex-col">
    <div class="order-status flex-col" v-if="typelist == 0">
      <div class="order-header">
        <div class="header-lf">
          <div class="lf-img">
            <img src="../../static/icones/type1.png" alt="" />
          </div>
          <span class="status">{{ statusData.title || "待支付" }}</span>
        </div>
        <div class="header-ri">
          <img src="../../static/icones/type.png" alt="" />
        </div>
      </div>
      <div class="tishi">
        <span class="time"
          >{{ time.mm }}:{{ time.ss }}<span class="zidong">自动取消</span></span
        >
        <span class="tips">{{ statusData.tips }}</span>
      </div>
    </div>
    <div class="order-status flex-col" v-if="typelist == 2">
      <div class="order-header">
        <div class="header-lf">
          <div class="lf-img">
            <img src="../../static/icones/type2.png" alt="" />
          </div>
          <!-- <span class="status">{{ statusData.title || "待发货" }}</span> -->
          <span class="status">待发货</span>
        </div>
        <div class="header-ri">
          <img src="../../static/icones/type.png" alt="" />
        </div>
      </div>
      <div class="tishi">
        <span class="time">等待风控审核</span>
        <!-- <span class="tips">{{ statusData.tips }}</span> -->
        <span class="tips">通过后商家将在48小时内尽快发货~</span>
      </div>
    </div>
    <div class="order-status flex-col" v-if="typelist == 3">
      <div class="order-header">
        <div class="header-lf">
          <div class="lf-img">
            <img src="../../static/icones/type3.png" alt="" />
          </div>
          <!-- <span class="status">{{ statusData.title || "已发货" }}</span> -->
          <span class="status">已发货</span>
        </div>
        <div class="header-ri">
          <img src="../../static/icones/type.png" alt="" />
        </div>
      </div>
      <div class="tishi">
        <span class="time">您的订单已发货，请注意查收~</span>
        <!-- <span class="tips">{{ statusData.tips }}</span> -->
      </div>
    </div>
    <div class="order-status flex-col" v-if="typelist == 5">
      <div class="order-header">
        <div class="header-lf">
          <div class="lf-img">
            <img src="../../static/icones/type5.png" alt="" />
          </div>
          <!-- <span class="status">{{ statusData.title || "租用中/待归还" }}</span> -->
          <span class="status">租用中/待归还</span>
        </div>
        <div class="header-ri">
          <img src="../../static/icones/type.png" alt="" />
        </div>
      </div>
      <div class="tishi">
        <span class="time">订单交易中</span>
        <!-- <span class="tips">{{ statusData.tips }}</span> -->
        <span class="tips">如有疑问可联系平台客服或商家进行处理！</span>
      </div>
    </div>
    <div class="order-status flex-col" v-if="typelist == 6">
      <div class="order-header">
        <div class="header-lf">
          <div class="lf-img">
            <img src="../../static/icones/type6.png" alt="" />
          </div>
          <!-- <span class="status">{{ statusData.title || "租用中/待归还" }}</span> -->
          <span class="status">归还中</span>
        </div>
        <div class="header-ri">
          <img src="../../static/icones/type.png" alt="" />
        </div>
      </div>
      <div class="tishi">
        <span class="time">订单交易中</span>
        <!-- <span class="tips">{{ statusData.tips }}</span> -->
        <span class="tips">如有疑问可联系平台客服或商家进行处理！</span>
      </div>
    </div>
    <div class="order-status flex-col" v-if="typelist == 7">
      <div class="order-header">
        <div class="header-lf">
          <div class="lf-img">
            <img src="../../static/icones/type4.png" alt="" />
          </div>
          <!-- <span class="status">{{ statusData.title || "租用中/待归还" }}</span> -->
          <span class="status">待完结</span>
        </div>
        <div class="header-ri">
          <img src="../../static/icones/type.png" alt="" />
        </div>
      </div>
      <div class="tishi">
        <span class="time">授权成功，等待商家完结订单</span>
        <!-- <span class="tips">{{ statusData.tips }}</span> -->
        <span class="tips">如有疑问可联系平台客服或商家进行处理！</span>
      </div>
    </div>
    <div class="order-status flex-col" v-if="typelist == 8">
      <div class="order-header">
        <div class="header-lf">
          <div class="lf-img">
            <img src="../../static/icones/type7.png" alt="" />
          </div>
          <!-- <span class="status">{{ statusData.title || "租用中/待归还" }}</span> -->
          <span class="status">已完结</span>
        </div>
        <div class="header-ri">
          <img src="../../static/icones/type.png" alt="" />
        </div>
      </div>
      <div class="tishi">
        <span class="time">您的订单已完结</span>
        <!-- <span class="tips">{{ statusData.tips }}</span> -->
        <span class="tips">如有押金冻结将在3个工作日内原路退还</span>
      </div>
    </div>
    <div class="order-status flex-col" v-if="typelist == 8">
      <div class="order-header">
        <div class="header-lf">
          <div class="lf-img">
            <img src="../../static/icones/type7.png" alt="" />
          </div>
          <!-- <span class="status">{{ statusData.title || "租用中/待归还" }}</span> -->
          <span class="status">已取消（系统自动关闭）</span>
        </div>
        <div class="header-ri">
          <img src="../../static/icones/type.png" alt="" />
        </div>
      </div>
      <div class="tishi">
        <span class="time">订单已取消</span>
        <!-- <span class="tips">{{ statusData.tips }}</span> -->
        <span class="tips">如有支付金额将会在1-3个工作日原路退还</span>
      </div>
    </div>
    <div class="address-data items-center">
      <div class="address-icon">
        <img src="../../static/icones/type11.png" alt="" />
      </div>
      <div class="info flex-col">
        <div class="name">{{ info.receiver }} {{ info.telephone }}</div>
        <div class="address-text">
          {{ info.address }}
        </div>
      </div>
    </div>
    <div class="authentication">
      <div class="authleft">
        <div class="lftop">认证信息</div>
        <div class="lfbo">点击加速，提高您的审核通过率</div>
      </div>
      <div class="authright">立即加速</div>
    </div>
    <!-- <div class="authentication">
      <div class="authleft">
        <div class="lftop">完结订单</div>
        <div class="lfbo">授权成功，等待商家扣款完结订单</div>
      </div>
      <div class="authright">加速完结</div>
    </div> -->
    <div class="order-item flex-col">
      <div class="title items-center">
        <img
          :src="info.storeLogo || changeUrl"
          alt=""
          class="logo"
          mode="aspectFit"
        />
        <span class="store-name">{{ info.storeName }} ></span>
      </div>
      <div class="content flex">
        <div class="left justify-center items-center">
          <img
            :src="info.coverUrl || changeUrl"
            alt=""
            class="pic"
            mode="aspectFit"
          />
        </div>
        <div class="right flex-col">
          <p class="goods-title ellipsis_1">
            {{ info.goodsName }}小米 Air 13.3寸小米 Air 13.3寸小米 Air
            13.3寸小米 Air 13.3寸小米 Air 13.3寸
          </p>
          <span class="spec">套餐：{{ info.specName }}</span>
          <div class="specss">
            <span class="rang-date spec"
              >租期:{{ info.startEndTimeString }}</span
            >
            <span class="num spec">X{{ info.num }}</span>
          </div>
        </div>
      </div>
      <div class="pingtai">
        <div class="pingtai-lf">
          <div class="lf-img">
            <img src="../../static/icones/orderlist23.png" alt="" />
          </div>
          <div class="lfserve">联系商家</div>
        </div>
        <div class="pingtai-ri" @tap="serveShow = true">
          <div class="ri-img">
            <img src="../../static/icones/orderlist22.png" alt="" />
          </div>
          <div class="lfserve">平台介入</div>
        </div>
      </div>
    </div>

    <div class="free box flex-col">
      <div class="top justify-between">
        <span class="name">首期实付租金</span>
        <span class="price" style="font-weight: bold"
          >￥{{ info.actualFee || 0 }}</span
        >
      </div>
      <div class="bottom flex-col">
        <!-- <div class="item justify-between">
          <span class="name">剩余租期</span>
          <span class="price" v-if="info.rentStage - 1 > 0">￥{{(info.rentFee * 30).toFixed(2)}}x{{info.rentStage - 1}}期</span>
          <span class="price" v-else>￥0</span>
        </div> -->
        <div class="item flex-row">
          <span class="name">剩余租期（期）</span>
          <span class="price"
            >￥{{ info.allRentFee || 0 }}*{{ info.allRentFee || 0 }}期</span
          >
        </div>
        <div class="item flex-row">
          <span class="name">尾款租金（期）</span>
          <span class="price"
            >￥{{ info.allRentFee || 0 }}*{{ info.allRentFee || 0 }}期</span
          >
        </div>
        <div class="item flex-row">
          <span class="name">总租金</span>
          <span class="price">￥{{ info.allRentFee || 0 }}</span>
        </div>
        <div class="item flex-row">
          <span class="name">优惠折扣</span>
          <span class="price price1">-￥{{ info.couponPrice || 0 }}</span>
        </div>
        <div class="item flex-row">
          <span class="name">配送方式</span>
          <span class="price">寄出到付 | 归还自付</span>
        </div>
        <div class="item flex-row">
          <span class="name"
            >买断尾款<img class="icon1" src="../../static/icones/icon1.png"
          /></span>
          <span class="price">￥{{ info.buyoutFee || 0 }}</span>
        </div>
      </div>
    </div>
    <div class="free box flex-col">
      <div class="top justify-between">
        <span class="name">其他服务</span>
        <span class="price">￥{{ info.addServicePrice }}</span>
      </div>
      <div class="bottom flex-col">
        <!-- <div
          class="item justify-between"
          v-for="(item, index) in servers"
          :key="`service${index}`"
        >
          <span class="name">{{ item.addServiceName }}</span>
          <span class="price">￥{{ item.addServicePrice }}</span>
        </div> -->
        <div class="item flex-row">
          <span class="name">{{
            item.addServiceName || "电脑包（需要归还）"
          }}</span>
          <span class="price">￥{{ item.addServicePrice || 0 }}</span>
        </div>
      </div>
    </div>

    <div class="free box flex-col">
      <div class="top justify-between">
        <div class="name items-center">
          冻结押金<span class="ss-tip">凭芝麻信用最高可全免</span>
          <!-- <span class="ss-tip">已冻结</span> -->
          <!-- <span class="ss-tip">已冻结</span> -->
        </div>
        <span class="price" style="font-weight: bold"
          >￥{{ info.allDeposit || 0 }}</span
        >
      </div>
      <div class="bottom flex-col">
        <div class="item flex-row">
          <span class="name">商品押金</span>
          <span class="price">￥{{ info.supplementaryDeposit || 0 }}</span>
        </div>
        <div class="item flex-row">
          <!-- <span class="name">芝麻信用免押金</span> -->
          <span class="name">芝麻信用减免</span>
          <span class="price">￥{{ info.freeDeposit || 0 }}</span>
        </div>
        <div class="item capit">
          <span class="name">押金冻结方式</span>
          <div class="capital" @click="capitalShow = true">
            <span class="price">支付宝资金授权</span>
            <img class="icon1" src="../../static/icones/icon1.png" />
          </div>
        </div>
      </div>
    </div>

    <div class="free flex-col mark">
      <div class="bottom flex-col">
        <div class="item flex-row">
          <span class="name">备注</span>
          <span class="price rowss ellipsis_1">{{
            info.userMessage ||
            "无11111111111111111111111111111无1无1无1无1无1无1无1无1无1无1无"
          }}</span>
        </div>
      </div>
      <!-- <div class="top justify-between">
        <div class="name items-center">留言</div>
        <span class="price">{{ info.userMessage || "没有留言" }}</span>
      </div>
      <div class="top justify-between">
        <div class="name items-center">邮箱</div>
        <span class="price">{{ info.postbox }}</span>
      </div> -->
    </div>

    <div class="free flex-col">
      <div class="top justify-between">
        <div class="name items-center">交易快照</div>
        <view class="price marks" @tap="goGoodsMark"
          >发生争执时，可作为判断依据<img
            src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/flow-right.png"
            alt=""
            class="flow"
        /></view>
      </div>
      <div class="top justify-between">
        <div class="name items-center">租赁协议</div>
        <span class="price marks" @tap="showContractUrl"
          >查看协议<img
            src="https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/goodsDetail/flow-right.png"
            alt=""
            class="flow"
        /></span>
      </div>
      <div class="bottom flex-col">
        <div class="item flex-row">
          <span class="name">订单编号</span>
          <span class="price">{{ info.orderNumber }}</span>
          <span class="copy-btn" @tap="$copyText(info.orderNumber)">复制</span>
        </div>
        <div class="item flex-row">
          <span class="name">创建时间</span>
          <span class="price">{{ info.createTime || "" }}</span>
        </div>
        <!-- <div class="item flex-row" v-if="info.contractUrl">
          <span class="name">租赁合同</span>
          <span class="copy-btn" @tap="showContractUrl">查看</span>
        </div>
        <div class="item flex-row" v-if="![0, 1, 2].includes(info.status)">
          <span class="name">发货-物流信息</span>
          <span class="price">{{ info.trackingNumber }}</span>
          <span class="copy-btn" @tap="$copyText(info.trackingNumber)"
            >复制</span
          >
        </div> -->
        <!-- <div class="item flex-row" v-if="[6, 7].includes(info.status)">
          <span class="name">归还物流信息</span>
          <span class="price">202110271015280032</span>
          <span class="copy-btn" @tap="$copyText(info.orderNumber)">复制</span>
        </div> -->
      </div>
    </div>

    <div class="btns box">
      <div class="btns-content justify-end items-center">
        <!-- 待支付 -->
        <span class="btn" v-if="info.status === 0" @tap="cancalOrder"
          >取消订单</span
        >
        <!-- 租用中， 待归还, 待评价 -->
        <span
          class="btn btn2"
          v-if="[4, 5, 7].includes(info.status)"
          @tap="payDetail"
          >账单详情</span
        >
        <!-- 租用中， 待归还 -->
        <span
          class="btn"
          v-if="[4, 5].includes(info.status) && info.type !== 3"
          @tap="returnGoods"
          >归还</span
        >
        <span
          class="btn"
          v-if="[4, 5].includes(info.status) && info.type !== 3"
          @tap="rerent"
          >续租</span
        >
        <span
          class="btn"
          v-if="[4, 5].includes(info.status) && info.type !== 3"
          @tap="buyout"
          >买断{{ info.type === 2 && info.buyoutId ? "支付" : "" }}</span
        >
        <span
          class="btn"
          v-if="[1, 0].includes(info.type) && info.settlementPrice > 0"
          @tap.stop="settle"
          >同意结算</span
        >

        <!-- 待评价 -->
        <span class="btn" v-if="info.status === 7" @tap="addAssess"
          >去评价</span
        >
        <!-- 待评价，已完成 -->
        <span class="btn" v-if="[7, 6].includes(info.status)" @tap="reorder"
          >再来一单</span
        >
        <!-- 全状态 -->
        <span class="btn" @tap="phone($orgPhone, 'platform')">平台客服</span>
        <!-- 除待评论 -->
        <!-- <span class="btn"  @tap="phone(info.storeTelphone, 'store')" v-if="![7].includes(info.status)">联系商家</span> -->
        <span class="btn" @tap="phone(info.storeTelphone, 'store')" v-if="false"
          >联系商家</span
        >
        <!-- 待支付 -->
        <span class="btn btn2" v-if="[0].includes(info.status)" @tap="pay"
          >去免押</span
        >
        <!-- 待审核，待发货 -->
        <span class="btn btn2" v-if="[1, 2].includes(info.status)" @tap="auth"
          >认证信息</span
        >
        <!-- 待审核 -->
        <span class="btn" v-if="[1].includes(info.status)" @tap="sign"
          >租赁合同签名</span
        >
        <!-- 查看物流 -->
        <!-- <span class="btn btn2" v-if="[3].includes(info.status)">查看物流</span> -->
        <!-- 人脸识别 -->
        <span
          class="btn"
          v-if="[1].includes(info.status) && info.isShow"
          @tap.stop="faceAuth"
          >人脸识别</span
        >
        <!-- 已取消 -->
        <span class="btn btn2" v-if="[8].includes(info.status)" @tap="reorder"
          >再来一单</span
        >
      </div>
    </div>
    <div class="btns-bottom bg-white"></div>
    <view class="modals">
      <u-modal
        :show="serveShow"
        :showConfirmButton="false"
        closeOnClickOverlay
        @close="() => (serveShow = false)"
      >
        <view class="slot-content">
          <view class="servea">
            <view class="serve-lf">
              <view class="serve-img">
                <img src="../../static/icones/icon2.png" alt="" />
              </view>
              <span class="server">在线客服</span>
            </view>
            <view class="serve-ri"
              ><img src="../../static/icones/icon4.png" alt=""
            /></view>
          </view>
          <view class="servea">
            <view class="serve-lf">
              <view class="serve-img">
                <img src="../../static/icones/icon3.png" alt="" />
              </view>
              <span class="server">热线客服</span>
            </view>
            <view class="serve-ri"
              ><img src="../../static/icones/icon4.png" alt=""
            /></view>
          </view>
          <!-- <view class="servecanner">
            <view class="serve-bo">
              <view class="serve-img">
                X<img src="../../static/icones/icon5.png" alt="" />
              </view>
            </view>
          </view> -->
        </view>
      </u-modal>
    </view>
    <view class="capital">
      <u-modal :show="capitalShow" :title="title">
        <view class="capitaltitle"
          >用户使用服务时，通过支付宝账户资金渠道做相应金额的授权，并不产生实际消费。</view
        >
        <u-button
          slot="confirmButton"
          text="确定"
          type="primary"
          shape="circle"
          @click="capitalShow = false"
        ></u-button>
      </u-modal>
    </view>
  </div>
</template>
<script>
import { getorderDetal } from "../../config/api";
// import OrderAction from '@utils/order'
export default {
  name: "orderInfo",
  data() {
    return {
      orderId: "",
      info: {},
      time: {
        mm: 29,
        ss: 59,
      },
      timer: null,
      serveShow: false,
      capitalShow: false,
      title: "支付宝资金授权",
      typelist: 0,
      changeUrl: "../../static/icones/pic1.png",
    };
  },
  mounted() {
    // const { id } = this.$query();
    // if (id) {
    //   this.orderId = Number(id);
    // }
    this.getOrderInfo();
  },
  computed: {
    statusData() {
      const title = {
        0: "待支付",
        1: "待审核",
        2: "待发货",
        3: "已发货",
        4: "租用中",
        5: "待归还",
        6: "已完成",
        7: "待评价",
        8: "已取消",
        10: "待完结",
        11: "归还中",
      }[this.info.status];
      const tips = {
        0: "您的订单还未进行减免押金，请及时处理！",
        1: "平台审核中，审核通过将在48小时内为您发货！",
        2: "平台审核通过，等待商家为您发货！",
        3: "您的订单已发货，请注意查收，谢谢！",
        4: "订单交易中，如有疑问可联系平台客服或商家进行处理！",
        5: "订单交易中，如有疑问可联系平台客服或商家进行处理！",
        6: "订单已完结，如有押金冻结将在3个工作日内原路退还！",
        7: "订单已完结，请对本次订单做个评价吧~",
        8: "订单已取消，如有支付金额将会在1-3工作日原路退还！",
        10: "订单交易中，如有疑问可联系平台客服或商家进行处理！",
        11: "订单交易中，如有疑问可联系平台客服或商家进行处理！",
      }[this.info.status];
      return {
        title,
        tips,
      };
    },
    deliveryType() {
      return this.info.deliveryTypeString
        ? this.info.deliveryTypeString.join(" | ")
        : "";
    },
  },
  methods: {
    async getOrderInfo() {
      const res = await getorderDetal({
        orderId: 50582,
        sessionId: "c22eeb72a2abdc87a2e8b2c6865d230d_61985",
      });
      this.info = res.data.orderDetailDTO;
      console.log(res, "[[[[[");
      // this.$api.getOrderDetail(this.orderId).then((data) => {
      //   this.info = data;
      //   this.$http
      //     .request({
      //       url: "/order/queryCertify.json",
      //       data: {
      //         orderId: data.id,
      //       },
      //     })
      //     .then(() => {
      //       this.$set(this.info, "isShow", true);
      //     })
      //     .catch(() => {
      //       this.$set(this.info, "isShow", false);
      //     });
      // });
    },
    setTimeDown() {
      // createTime 1644994798000
      if (Date.now() - this.info.createTime >= 30 * 60 * 1000) {
        // 取消订单
      } else {
        this.timer = setInterval(() => {
          const timeStamp = this.info.createTime + 30 * 60 * 1000 - Date.now();
          if (timeStamp > 0) {
            const times = timeStamp / 1000;
            const minute = Math.floor((times % 3600) / 60);
            const second = Math.floor((times % 3600) % 60);
            const _minute = minute > 9 ? minute : `0${minute}`;
            const _second = second > 9 ? second : `0${second}`;
            console.log(_second);
            this.time.mm = _minute;
            this.time.ss = _second;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    cancalOrder() {
      OrderAction.cancalOrder(this.orderId).then(() => {
        this.getOrderInfo();
      });
    },
    phone(phone, type) {
      OrderAction.phone(phone, type);
    },
    pay() {
      OrderAction.pay(this.orderId).then(() => {
        this.getOrderInfo();
      });
    },
    sign() {
      OrderAction.sign({ orderNumber: this.info.orderNumber, $env: this.$env });
    },
    payDetail() {
      OrderAction.payDetail(this.orderId);
    },
    addAssess() {
      OrderAction.addAssess(this.orderId);
    },
    reorder() {
      OrderAction.reorder(this.info.goodsId);
    },
    returnGoods() {
      OrderAction.returnGoods(this.orderId);
    },
    rerent() {
      OrderAction.rerent(this.orderId);
    },
    buyout() {
      if (this.info.type === 2) {
        if (this.info.buyoutId) {
          OrderAction.pay(this.info.buyoutId, 3).then(() => {
            this.$toast("你已支付买断金额，请联系商家完结订单");
            this.$parent.getOrderList();
          });
        } else {
          this.$toast("买断申请中");
        }
      } else {
        OrderAction.buyout(this.orderId);
      }
    },
    auth() {
      OrderAction.auth();
    },
    goGoodsMark() {
      uni.navigateTo({ url: `/pages/goodsMark/index?id=${this.orderId}` });
    },
    settle() {
      OrderAction.pay(this.orderId, 4).then((result) => {
        if (result === "6001") {
          this.$toast("已取消支付", "error");
        } else {
          this.$toast("结算成功");
          this.getOrderInfo();
        }
      });
    },
    faceAuth() {
      OrderAction.faceAuth(this.orderId).then(() => {
        this.$set(this.info, isShow, true);
      });
    },

    showContractUrl() {
      this.$taro.downloadFile({
        url: this.info.contractUrl,
        success: ({ apFilePath, tempFilePath }) => {
          this.$taro.openDocument({
            filePath: apFilePath || tempFilePath,
            fileType: "pdf",
            success: (res) => {
              console.log("打开成功");
            },
          });
        },
      });
    },
  },
};
</script>
<style lang="scss">
::v-deep.u-modal__content {
  padding: 0 !important;
}
.capital {
  .capitaltitle {
    width: 210px;
    height: 114px;
    line-height: 28px;
    text-align: center;
    font-family: PingFang SC Medium;
    font-size: 14px;
    color: #333333;
    padding: 12px 0;
  }
}
.modals {
  position: relative;
  .slot-content {
    width: 100%;
    height: 150px;
    .servea {
      width: 100%;
      height: 50%;
      padding: 0 25px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .serve-lf {
        display: flex;
        // padding-top: 10px;
        .serve-img {
          width: 30px;
          height: 50%;
          img {
            width: 25px;
            height: 25px;
          }
        }
        .server {
          color: #3d3d3d;
          font-size: 15px;
        }
      }
      .serve-ri {
        img {
          width: 8px;
          height: 20px;
        }
      }
    }
    .servecanner {
      width: 100%;
      height: 70px;
      // opacity: 0.6;
      z-index: 100;
      color: #000;
      .serve-bo {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        // background-color: rgb(212, 77, 77);
        .serve-img {
          width: 30px;
          height: 30px;
          img {
            width: 29px;
            height: 29px;
          }
        }
      }
    }
  }
}

.orderInfo {
  // padding: 0 10px 70px;
  // padding-bottom: calc(constant(safe-area-inset-bottom) + 60px);
  // padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
  // position: relative;
  width: 100vw;
  background: url("../../static/icones/orderdetail.png") no-repeat center;
  // background-size: 100vw 100vh;
  overflow: scroll;
  padding: 0 12px;
  padding-bottom: 100px;

  .box {
    // box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.16);
    // border-radius: 10px;
    // width: 100%;
    // padding: 0 11px;
    // margin-top: 11px;
    // background-color: #fff;
  }
  .order-status {
    width: 100%;
    height: 105px;
    padding-top: 10px;
    padding-bottom: 10px;
    .order-header {
      width: 100%;
      height: 40px;
      // padding-left: 6px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header-lf {
        width: 50%;
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
        .lf-img {
          width: 30px;
          height: 40px;
          padding-left: 10px;
          padding-top: 5px;
          img {
            width: 21px;
            height: 21px;
          }
        }
        .status {
          color: #157afe;
          font-size: 20px;
          padding-left: 6px;
          font-family: PingFang SC Heavy;
        }
      }
      .header-ri {
        width: 40px;
        height: 40px;
        padding-top: 5px;
        img {
          width: 34px;
          height: 34px;
          object-fit: contain;
        }
      }
    }
    .tishi {
      width: 100%;
      height: 55px;
      padding-left: 15px;
      display: flex;
      flex-direction: column;
      // justify-content: space-evenly;
      .tips {
        font-size: 12px;
        font-family: PingFang SC Bold;
        color: #3d3d3d;
      }
      .time {
        font-size: 12px;
        font-family: PingFang SC Bold;
        color: #3d3d3d;
        .zidong {
          padding-left: 6px;
        }
      }
    }
    .pay-btn {
      width: 72px;
      height: 28px;
      border-radius: 14px;
      line-height: 30px;
      text-align: center;
      color: #0096ff;
      position: absolute;
      right: 12px;
      top: 41px;
      // background-color: #fff;
    }
  }
  .address-data {
    width: 100%;
    min-height: 71px;
    background-color: #fff;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    padding: 12px 18px;
    color: #3d3d3d;
    display: flex;
    align-items: center;
    .address-icon {
      width: 40px;
      height: 100%;
      img {
        width: 29px;
        height: 29px;
      }
    }
    .info {
      width: 85%;
      height: 100%;
      .name {
        margin-top: 12px;
        font-size: 14px;
        line-height: 20px;
      }
      .address-text {
        font-size: 12px;
        line-height: 17px;
        color: #555;
        margin-top: 6px;
        max-width: 325px;
      }
    }
  }
  .authentication {
    width: 100%;
    min-height: 61px;
    background-color: #fff;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    margin-top: 12px;
    font-size: 14px;
    color: #6d6d6d;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .authleft {
      width: 60%;
      height: 100%;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      .lftop {
        color: #3d3d3d;
        font-size: 15px;
        padding-bottom: 4px;
      }
    }
    .authright {
      // flex: 1;
      width: 96px;
      height: 34px;
      background: linear-gradient(
        290deg,
        #157afe 0%,
        #157afe 0%,
        #66a8ff 100%,
        #66a8ff 100%
      );
      border-radius: 22px;
      font-size: 14px;
      color: #fff;
      text-align: center;
      line-height: 34px;
    }
  }

  .order-item {
    width: 100%;
    min-height: 151px;
    margin-top: 12px;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    background: #ffffff;
    .title {
      height: 45px;
      width: 100%;
      padding: 0 15px;
      border-bottom: 1px solid #f5f5f5;
      .logo {
        width: 18px;
        height: 18px;
        border-radius: 50%;
      }
      .store-name {
        color: #000000;
        font-size: 14px;
        margin-left: 4px;
        line-height: 20px;
      }
    }
    .content {
      padding: 15px 15px 0;
      width: 100%;
      min-height: 107px;
      border-bottom: 1px solid #e4e4e4;
      .left {
        width: 82px;
        height: 82px;
        background-color: #f9f9f9;
        margin-right: 12px;
        .pic {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        .goods-title {
          color: #333333;
          font-size: 14px;
          max-width: 210px;
          line-height: 20px;
        }
        .spec {
          color: #aaaaaa;
          font-size: 12px;
          line-height: 17px;
          margin-top: 6px;
        }
        .specss {
          display: flex;
          justify-content: space-between;
        }
        .all-rang {
          width: 210px;
          color: #333333;
          font-size: 14px;
          font-weight: bold;
          line-height: 20px;
          margin-top: 6px;
          .num {
            margin-left: auto;
          }
        }
      }
    }
    .pingtai {
      width: 100%;
      height: 44px;
      color: #3d3d3d;
      font-size: 14px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      // background-color: rgb(224, 140, 140);
      .pingtai-lf,
      .pingtai-ri {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .lf-img,
        .ri-img {
          width: 20px;
          height: 20px;
          margin-left: 20px;
          margin-right: 3px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .free {
    min-height: 51px;
    padding: 15px;
    margin-top: 12px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    .flow {
      width: 16px;
      height: 16px;
      margin-left: 5px;
    }
    .top {
      font-size: 15px;
      line-height: 36px;
      color: #3d3d3d;
      min-height: 36px;
      border-bottom: 1px solid #e4e4e4;

      .price {
        font-size: 18px;
        color: #eb0a0a;
        font-weight: 700;
        max-width: 280px;
        &.marks {
          color: #3d3d3d;
          font-size: 14px;
          font-weight: normal;
        }
      }
      .ss-tip {
        min-width: 60px;
        height: 21px;
        line-height: 21px;
        text-align: center;
        font-size: 12px;
        color: #157afe;
        border-radius: 5px;
        background: url("../../static/icones/icon6.png") no-repeat center;
        // background-size: 100vw 100vh;
        overflow: scroll;
        padding: 0 10px;
        // border: 1px solid #0096ff;
        // opacity: 0.1;
        // background-color: #157afe;
        // margin-left: 6px;
      }
    }

    .bottom {
      width: 100%;
      // min-height: 60px;
      // padding: 9px 12px;
      margin-top: 12px;
      .capit {
        display: flex;
        justify-content: space-between;
        .capital {
          flex: 1;
          display: flex;
          align-items: center;
          .icon1 {
            width: 15px;
            height: 15px;
          }
        }
      }
      .item {
        height: 36px;
        font-size: 14px;
        color: #3d3d3d;
        width: 100%;
        line-height: 36px;

        &.top {
          color: #5d5d5d;
          margin-bottom: 13px;
        }

        &:last-child {
          margin-bottom: 0;
        }
        .name {
          .icon1 {
            width: 15px;
            height: 15px;
            display: inline-block;
            margin-left: 5px;
            padding-top: 4px;
          }
        }
        .price {
          margin-left: auto;
          & + .copy-btn {
            margin-left: 7px;
          }
          &.price1 {
            color: #eb0a0a;
            font-size: 16px;
          }
          .icon1 {
            width: 15px;
            height: 15px;
            display: inline-block;
            margin-left: 5px;
            padding-top: 4px;
          }
          &.rowss {
            width: 90%;
            height: 25px;
          }
        }

        .copy-btn {
          width: 34px;
          height: 16px;
          background: #f5f5f5;
          border: 1px solid #979797;
          border-radius: 8px;
          margin-left: auto;
          line-height: 16px;
          text-align: center;
          font-size: 10px;
          color: #333;
        }
      }
      &.mark {
        .price {
        }
      }
    }

    // .free-msg {
    //   margin-top: 13px;
    //   font-size: 13px;
    //   line-height: 21px;
    //   color: #B0B0B0;

    //   .name {
    //     margin-left: 13px;
    //   }

    //   .price {
    //     margin-left: auto;
    //     margin-right: 12px;
    //   }
    // }
  }

  // .shot {
  //   height: 102px;
  //   .top {
  //     font-size: 16px;
  //     line-height: 21px;
  //     color: #4A4A4A;
  //     margin-top: 11px;
  //     .text {
  //       color: #29B5FF;
  //       .flow {
  //         width: 16px;
  //         height: 16px;
  //         margin-left: 5px;
  //       }
  //     }
  //   }
  //   .item {
  //     font-size: 13px;
  //     font-family: PingFang SC;
  //     font-weight: 400;
  //     line-height: 21px;
  //     color: #B0B0B0;
  //     margin-bottom: 2px;
  //     .text {
  //       margin-left: auto;
  //     }
  //     .btn {
  //       width: 50px;
  //       height: 21px;
  //       background: #F1F1F1;
  //       border: 1px solid #8F8F8F;
  //       border-radius: 11px;
  //       margin-left: 7px;
  //       line-height: 21px;
  //       text-align: center;
  //     }
  //   }
  // }

  .btns {
    height: 48px;
    padding: 0 20px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
    max-width: 100%;
    overflow-x: scroll;
    z-index: 100;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    width: 100%;
    .btns-content {
      height: 48px;
      width: fit-content;
      min-width: 100%;
      .btn {
        width: 76px;
        height: 30px;
        border: 1px solid #29b5ff;
        border-radius: 15px;
        margin-right: 10px;
        font-size: 12px;
        line-height: 32px;
        color: #29b5ff;
        text-align: center;
      }
      .btn2 {
        background: #29b5ff;
        color: #fff;
        // margin-right: 5px;
      }
    }
  }
  .btns-bottom {
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
  }
}
</style>
